{% extends "base.html" %}

{% block html_title %}
    游戏数据详情
{% endblock html_title %}

{% block page_title %}
    游戏数据详情
{% endblock page_title %}

{% block content %}
<div id="content">

    <el-row>
        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <span>Summary</span>
            </div>
            <el-row :gutter="10">
                <el-col :span="2">期号</el-col>
                <el-col :span="4">{{gameset.sn}}</el-col>
                <el-col :span="2">庄家</el-col>
                <el-col :span="4">{{gameset.banker}}</el-col>
            </el-row>
{#            <el-row :gutter="10">#}
{#                <el-col :span="2">玩家数量</el-col>#}
{#                <el-col :span="4">{{gameset.playerCount}}</el-col>#}
{#                <el-col :span="2">发包数量</el-col>#}
{#                <el-col :span="4">{{gameset.envelopeCount}}</el-col>#}
{#                <el-col :span="2">发包金额</el-col>#}
{#                <el-col :span="4">{{gameset.envelopeAmount}}</el-col>#}
{#            </el-row>#}
{#            <el-row :gutter="10">#}
{#                <el-col :span="2">下注积分</el-col>#}
{#                <el-col :span="4">{{gameset.wagerAmount}}</el-col>#}
{#                <el-col :span="2">抽水</el-col>#}
{#                <el-col :span="4">{{gameset.deduction}}</el-col>#}
{#            </el-row>#}
        </el-card>
    </el-row>
    <el-row>
        <el-table :data="players" @sort-change="onSortChanged"
                  @row-click="onTableRowClick">s
            <el-table-column prop="playerNickname" label="玩家昵称">
            </el-table-column>
            <el-table-column prop="playerId" label="微信id">
            </el-table-column>
            <el-table-column prop="wagerAmount" label="下注积分">
            </el-table-column>
{#            <el-table-column prop="envelopeAmount" label="抢包金额">#}
{#            </el-table-column>#}
            <el-table-column prop="grabPoint" label="本期点数">
            </el-table-column>
            <el-table-column prop="earnedAmount" label="盈亏">
            </el-table-column>
        </el-table>
    </el-row>

    <el-row>
        <el-pagination background layout="prev, pager, next"
                       :total="playersCount" page-size=30
                       :current-page.sync="currentPage" @current-change="onCurrentPageChanged">
        </el-pagination>
    </el-row>

</div>
{% endblock content %}

{% block js %}
<script>
    var container = new Vue({
        el: "#content",
        data: function() {
            return {
                gamesetId: {{ gameset_id }},
                gameset: null,
                currentPage: 1,
                playersCount: 0,
                players: [],
                banker: null
            }
        },
        methods: {
            onSortChanged: function(args) {
                console.log(args);
            },
            onTableRowClick: function(row, event, column) {
                console.log(row);
                console.log(column);
                console.log(column);
            },
            onCurrentPageChanged: function(currentPage) {
                this.refreshGamesetDetail();
            },
            refreshGamesetDetail: function() {
                this.$http.get('/api/gameset/'+this.gamesetId, {
                    params: {
                        page: this.currentPage-1,
                    }
                }).then((res) => {
                    this.gameset = res.data.gameset;
                    this.playersCount = res.data.count;
                    this.players = res.data.players;
                    this.banker = res.data.banker;

                    if(this.gameset.envelopeAmount !== 0){
                        this.gameset.envelopeAmount = this.gameset.envelopeAmount / 100;
                    }
                });
            },
        },
        created: function() {
            this.refreshGamesetDetail();
        }
    });
</script>
{% endblock js %}
